<template>
    <div class="zhidian-edit">
        <span  class="iconfont icon-zidian" @click="visibledialog=true"></span>
        <el-dialog title="字典翻译" :visible.sync="visibledialog" width="50%"
                   :closeOnClickModal="false" :before-close="closeBox">
            <el-form label-position="right" label-width="60px">
                <div class="text-show" v-for="(value, key, index) in jsonData"  :key="key">
                    <span>{{key}}&nbsp;&nbsp;:&nbsp;&nbsp;{{value}}</span>
                    <el-button size="mini" type="primary" @click="removeKey(key)">删除</el-button>
                </div>
                <div class="form-block">
                    <el-form-item label="翻译前" class="mr10">
                        <el-input size="mini" v-model="newKey" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="翻译后" class="mr10">
                        <el-input size="mini"  v-model="newValue" placeholder="请输入"></el-input>
                    </el-form-item>
                    <div>
                        <el-button size="mini" type="success" icon="el-icon-add" @click="addKey">添加</el-button>
                    </div>
                </div>
            </el-form>


            <span slot="footer" class="dialog-footer">
               <el-button size="mini" type="success" @click="save">保存</el-button>
               <el-button size="mini" type="primary" @click="closeBox">取消</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import ajax from "@api/ajax";
    import {updateNickNameInfo} from '@api/url'
    import { EventBus } from './EventBus.js';
    export default {
        name: "zhidian",
        data () {
            return {
                visibledialog:false,
                jsonData:{},
                newKey: '',
                newValue: ''
            }
        },
        props:{
            info:{},//{colName:'',modelId:''}//必传
        },
        mounted(){
         this.init();
        },
        methods:{
            init(){
                if(this.info.jsonData){//数据处理
                    let json = this.info.jsonData;//返回的数据为 "{'1':'1111'}"
                    json = json.replace(/'/g, '"')
                    this.jsonData=JSON.parse(json);
                }else this.jsonData={}
            },
            closeBox (flag=true) {
                this.visibledialog = false;
                //数据初始化
                if(flag) this.init();
            },
            //翻译保存
            save(){
                //修改成功后 修改input数据
                ajax.post(updateNickNameInfo, {
                    colName :this.info.colName,
                    modelId :this.info.modelId,
                    jsonData:this.jsonData,
                }).then(res => {
                    this.$notify({
                        title:'温馨提示',
                        message:'修改成功',
                        type:'success',
                    })
                    this.$emit('complete',this.info);
                    EventBus.$emit('complete',this.info);
                    this.closeBox(false);
                })
            },
            addKey() {
                if (this.newKey && this.newValue) {
                    this.$set(this.jsonData, this.newKey, this.newValue);
                    this.newKey = '';
                    this.newValue = '';
                }
            },
            removeKey(key) {
                this.$delete(this.jsonData, key);
            }
        }
    }
</script>

<style scoped lang="stylus">
.zhidian-edit{
    font-size 14px;
    color: gray
    position relative
    padding-left 4px;
    .icon-zidian{
        color green
        cursor: pointer
    }
    .text-show{
        display flex
        align-items center
        margin-right 10px
        margin-bottom 10px
        button{
            margin-left 6px
        }
        span{
            display flex
            width 60%
            flex-wrap wrap
            font-weight bolder
            padding-left 10px
        }
    }
    .form-block{
        display: flex;
        button{
            margin-top: 6px;
        }
    }
    .mr10{
        margin-right 10px
    }
}
</style>
